<template>
 <div class="container">
   <div @mouseleave="setTimer('first level')">first div</div>
   <div @mouseenter="setTimer('sescond enter')">sescond div</div>
 </div>

</template>

<script  lang="js">
const timer = null
export default {
  name: 'Timer',
  data() {
    return {
      timer: null,
      count: 0
    }
  },
  methods: {
    setTimer(str) {
      if (str === "sescond enter"){
        clearTimeout(this.timer)
        console.log(str+"定时器清除！")
        return
      }
      this.timer = setTimeout(() => {
        console.log(str+"定时器执行！")
      },1000)
    },
  },
}


</script>

<style scoped>

.container{
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  width: 500px;
}



.container div {
  background-color: red;
  width: 200px;
  height: 200px;
  flex: 1;
}

.container div:nth-child(2) {
  background-color: blue;
}

</style>